<template>
  <div class="backStageTest">
    <div class="contWrap">
      <div class="notice">
        <noticeBase></noticeBase>
      </div>
      <div class="showContent">
        <div class="left" :style="navPosition" ref="tabNavs">
          <ul>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
            <li>5</li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item, index) in 100" :key="index">item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NoticeBase from '../base/noticeBase/noticeBase'
export default {
  name: 'backStageTest',
  components: {
    NoticeBase
  },
  data () {
    return {
      navPosition: ''
    }
  },
  methods: {
    setNavPosition () {
      let dom = this.$refs.tabNavs
      let top = dom.offsetTop
      let left = dom.offsetLeft
      console.log('%O', dom)
      this.navPosition = `position:fixed;top:${top + 52}px;left:${left}px;`
    }
  },
  mounted () {
    this.setNavPosition()
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.backStageTest
  width 100%
  // height 100%
  .contWrap
    max-width 1240px
    margin 0 auto
    // position relative
    .notice
      margin-top 20px
      margin-bottom 20px
    .showContent
      // position relative
      display flex
      .left
        flex 3
        width 162px
        background orange
        margin-right 15px
      .right
        flex 17
        margin-left 177px
        background skyblue
</style>
